<template>
  <div class="selector-demo">
    <h2 class="section-title">CSS 选择器详解</h2>
    <p class="section-intro">
      CSS选择器是用来选择HTML元素的模式。掌握各种选择器的使用方法是CSS的基础。
    </p>

    <div class="demo-grid">
      <!-- 基础选择器 -->
      <div class="demo-card">
        <h3>基础选择器</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 元素选择器 */
p { color: blue; }

/* 类选择器 */
.highlight { background: yellow; }

/* ID选择器 */
#header { font-size: 24px; }

/* 通用选择器 */
* { margin: 0; padding: 0; }</code></pre>
          </div>
          <div class="demo-result">
            <p class="basic-p">这是一个段落 (元素选择器)</p>
            <p class="highlight">这是高亮段落 (类选择器)</p>
            <p id="special-p">这是特殊段落 (ID选择器)</p>
            <p class="universal-demo">通用选择器重置了默认样式</p>
          </div>
        </div>
      </div>

      <!-- 属性选择器 -->
      <div class="demo-card">
        <h3>属性选择器</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 存在属性 */
[title] { border: 1px solid red; }

/* 属性值完全匹配 */
[type="text"] { background: #f0f0f0; }

/* 属性值包含 */
[class*="btn"] { padding: 8px 16px; }

/* 属性值开头匹配 */
[href^="https"] { color: green; }</code></pre>
          </div>
          <div class="demo-result">
            <span title="这有提示">悬停查看 (存在属性)</span>
            <input type="text" placeholder="文本输入框" class="attr-input" />
            <button class="btn-primary">按钮 (属性值包含)</button>
            <a href="https://example.com" class="attr-link">安全链接 (属性值开头匹配)</a>
          </div>
        </div>
      </div>

      <!-- 伪类选择器 -->
      <div class="demo-card">
        <h3>伪类选择器</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 鼠标悬停 */
.hover-demo:hover { background: #e3f2fd; }

/* 第一个子元素 */
li:first-child { font-weight: bold; }

/* 第n个子元素 */
li:nth-child(2n) { background: #f5f5f5; }

/* 非匹配元素 */
p:not(.exclude) { color: #333; }</code></pre>
          </div>
          <div class="demo-result">
            <div class="hover-demo">悬停我试试 (鼠标悬停)</div>
            <ul class="pseudo-list">
              <li>第一项 (first-child)</li>
              <li>第二项 (nth-child偶数)</li>
              <li>第三项</li>
              <li>第四项 (nth-child偶数)</li>
            </ul>
            <p>正常段落 (非匹配元素)</p>
            <p class="exclude">排除的段落 (被:not排除)</p>
          </div>
        </div>
      </div>

      <!-- 伪元素选择器 -->
      <div class="demo-card">
        <h3>伪元素选择器</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 首字母 */
.first-letter::first-letter {
  font-size: 2em;
  color: #e91e63;
}

/* 前后插入内容 */
.quote::before { content: '"'; }
.quote::after { content: '"'; }

/* 选中文本样式 */
.selectable::selection {
  background: #ffeb3b;
  color: #333;
}</code></pre>
          </div>
          <div class="demo-result">
            <p class="first-letter">这段文字的首字母会被特殊样式化 (首字母)</p>
            <p class="quote">这是一段被引号包围的文字 (前后插入内容)</p>
            <p class="selectable">选中这段文字看看效果 (选中文本样式)</p>
          </div>
        </div>
      </div>

      <!-- 组合选择器 -->
      <div class="demo-card">
        <h3>组合选择器</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 后代选择器 */
.container p { color: #666; }

/* 子选择器 */
.parent > .child { border-left: 3px solid #2196f3; }

/* 相邻兄弟选择器 */
h4 + p { margin-top: 0; }

/* 通用兄弟选择器 */
h4 ~ p { font-style: italic; }</code></pre>
          </div>
          <div class="demo-result">
            <div class="container">
              <p>容器内的段落 (后代选择器)</p>
            </div>
            <div class="parent">
              <div class="child">直接子元素 (子选择器)</div>
              <div>
                <div class="child">嵌套子元素 (不匹配子选择器)</div>
              </div>
            </div>
            <div class="sibling-demo">
              <h4>标题</h4>
              <p>紧邻的段落 (相邻兄弟选择器)</p>
              <div>分隔元素</div>
              <p>后续段落 (通用兄弟选择器)</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 高级选择器 -->
      <div class="demo-card">
        <h3>高级选择器技巧</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 多类选择器 */
.btn.primary { background: #2196f3; }

/* 群组选择器 */
h1, h2, h3 { font-family: 'Arial'; }

/* 复杂组合 */
.card:hover .card-title::after {
  content: ' ✨';
}

/* 函数式伪类 */
:is(.warning, .error) { color: red; }
:where(.reset) { margin: 0; }</code></pre>
          </div>
          <div class="demo-result">
            <button class="btn primary">主要按钮 (多类选择器)</button>
            <button class="btn">普通按钮</button>
            <h3 class="group-title">群组选择器示例</h3>
            <div class="card">
              <h4 class="card-title">卡片标题 (复杂组合)</h4>
              <p>悬停卡片查看效果</p>
            </div>
            <div class="warning">警告信息 (函数式伪类)</div>
            <div class="error">错误信息 (函数式伪类)</div>
          </div>
        </div>
      </div>
    </div>

    <div class="selector-tips">
      <h3>选择器使用技巧</h3>
      <ul>
        <li><strong>性能考虑：</strong>ID选择器 > 类选择器 > 元素选择器 > 通用选择器</li>
        <li><strong>避免过深嵌套：</strong>选择器层级不要超过3-4层</li>
        <li><strong>语义化命名：</strong>使用有意义的类名，如 .btn-primary 而不是 .blue-button</li>
        <li><strong>模块化思维：</strong>使用BEM命名规范，如 .block__element--modifier</li>
        <li><strong>现代伪类：</strong>善用 :is()、:where()、:has() 等现代伪类</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
// 这个组件主要用于展示，不需要复杂的逻辑
</script>

<style scoped lang="scss">
.selector-demo {
  .section-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
    border-bottom: 3px solid #2196f3;
    padding-bottom: 0.5rem;
  }

  .section-intro {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
  }

  .demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .demo-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background: #fafafa;

    h3 {
      margin: 0 0 1rem 0;
      color: #2196f3;
      font-size: 1.3rem;
    }

    .code-example {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .code-block {
      background: #2d3748;
      border-radius: 6px;
      padding: 1rem;
      overflow-x: auto;

      pre {
        margin: 0;
        color: #e2e8f0;
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        line-height: 1.4;
      }
    }

    .demo-result {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 1rem;
      min-height: 100px;
    }
  }

  .selector-tips {
    background: #e3f2fd;
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid #2196f3;

    h3 {
      margin: 0 0 1rem 0;
      color: #1976d2;
    }

    ul {
      margin: 0;
      padding-left: 1.5rem;

      li {
        margin-bottom: 0.5rem;
        line-height: 1.5;

        strong {
          color: #1976d2;
        }
      }
    }
  }
}

// 演示样式
.basic-p {
  color: blue;
}

.highlight {
  background: yellow;
  padding: 4px 8px;
  border-radius: 4px;
}

#special-p {
  font-size: 18px;
  font-weight: bold;
}

.universal-demo {
  margin: 0;
  padding: 0;
  border: 1px dashed #999;
  padding: 4px 8px;
  border-radius: 4px;
}

.attr-input {
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
  margin-right: 8px;
}

.btn-primary {
  padding: 8px 16px;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  margin-right: 8px;
  cursor: pointer;
}

.attr-link {
  color: green;
  text-decoration: none;
  margin-right: 8px;

  &:hover {
    text-decoration: underline;
  }
}

[title] {
  border: 1px solid red;
  padding: 2px 4px;
  border-radius: 2px;
}

.hover-demo {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;

  &:hover {
    background: #e3f2fd;
  }
}

.pseudo-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;

  li {
    padding: 8px;
    margin-bottom: 4px;
    border-radius: 4px;

    &:first-child {
      font-weight: bold;
      background: #fff3e0;
    }

    &:nth-child(2n) {
      background: #f5f5f5;
    }
  }
}

p:not(.exclude) {
  color: #333;
}

.exclude {
  color: #999 !important;
  text-decoration: line-through;
}

.first-letter::first-letter {
  font-size: 2em;
  color: #e91e63;
  float: left;
  line-height: 1;
  margin-right: 4px;
}

.quote {
  &::before {
    content: '"';
    font-size: 1.2em;
    color: #666;
  }

  &::after {
    content: '"';
    font-size: 1.2em;
    color: #666;
  }
}

.selectable::selection {
  background: #ffeb3b;
  color: #333;
}

.container p {
  color: #666;
  margin: 8px 0;
}

.parent > .child {
  border-left: 3px solid #2196f3;
  padding-left: 8px;
  margin: 4px 0;
}

.sibling-demo {
  h4 + p {
    margin-top: 0;
    color: #2196f3;
  }

  h4 ~ p {
    font-style: italic;
    color: #666;
  }
}

.btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  margin-right: 8px;

  &.primary {
    background: #2196f3;
    color: white;
    border-color: #2196f3;
  }
}

.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    .card-title::after {
      content: ' ✨';
    }
  }

  .card-title {
    margin: 0 0 0.5rem 0;
    color: #333;
  }
}

:is(.warning, .error) {
  color: red;
  padding: 8px;
  border-radius: 4px;
  margin: 4px 0;
}

.warning {
  background: #fff3cd;
}

.error {
  background: #f8d7da;
}

.group-title {
  font-family: 'Arial', sans-serif;
  color: #2196f3;
  margin: 8px 0;
}
</style>
